<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/animate.min.css}">
    <link rel="stylesheet" th:href="@{/js/layui_ext/dtree/dtree.css}">
    <link rel="stylesheet" th:href="@{/js/layui_ext/dtree/font/dtreefont.css}">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1041315_sxzo24nrfwk.css">
<!--    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">-->
</head>

<style>
    html, body {
        height: 100%;
        margin:0;padding:0;
        font-size: 12px;
    }
    div{
        -moz-box-sizing: border-box;  /*Firefox3.5+*/
        -webkit-box-sizing: border-box; /*Safari3.2+*/
        -o-box-sizing: border-box; /*Opera9.6*/
        -ms-box-sizing: border-box; /*IE8*/
        box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
    }

    .layui-table-view .layui-table {width:100%}
</style>

<body class="animated fadeIn">

<div class="page-loading" style="display: none">
    <div class="rubik-loader"></div>
</div>

<div style="height: 100%">
    <div style="height: 100%">
        <div style="padding: 20px; background-color: #F2F2F2;height:100%;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">部门树</div>
                        <div class="layui-card-body" id="toolbarDiv">
                            <ul id="deptTree" class="dtree" data-id="0"></ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md9">
                    <div class="layui-card">
                        <div class="layui-card-header" id="card-header">部门列表</div>
                        <div class="layui-card-body">
                            <table class="layui-hide" id="dept-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbar">
    <shiro:hasPermission name="dept:add">
        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add">
            <i class=" iconfont icon-xinzeng"></i>
            新增
        </button>
    </shiro:hasPermission>
</script>


<script type="text/html" id="column-toolbar">

        <a lay-event="edit">
            <i class="iconfont icon-xiugai" style="color: crimson;" title="编辑"></i>
        </a>

        <a lay-event="del">
            <i class=" iconfont  icon-shanchu" style="color: red" title="删除"></i>
        </a>

</script>

<script type="text/html" id="column-toolbar-sort">
    <i class="iconfont icon-cs-xs-1" style="color: #1548bd;font-weight: 900;" lay-event="up" title="上移"></i>

    <i class="iconfont icon-cs-xx-1" style="color: #1548bd;font-weight: 900;" lay-event="down" title="下移"></i>

</script>

<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<!--<script th:src="@{/js/common.js}"></script>-->

<script>

    var parentDeptId = 0;


    layui.config({
        base:  '/js/common/'
    }).use(['jquery', 'dtree', 'layer', 'table', 'element','common'], function () {
        var dtree = layui.dtree;
        var layer = layui.layer;
        common=layui.common;
        var table = layui.table;

        var DTree = dtree.render({
            elem: "#deptTree",
            url: "tree/root",
            dataStyle: "layuiStyle",
            initLevel: 5,   // 初始打开节点级别
            method: "GET",
            dot: false,     // 圆点是否显示
            toolbar: true,  // 右键工具栏
            menubar: true,  // 树上方工具栏, 展开、收缩、刷新、搜索等
            toolbarShow: [],
            toolbarScroll: "#toolbarDiv",
            toolbarExt: [
                {
                    toolbarId: "add",
                    icon: "dtree-icon-roundadd",
                    title: "添加子节点",
                    handler: function (node, $div) {
                        add(node.nodeId);
                    }
                },
                {
                    toolbarId: "edit",
                    icon: "dtree-icon-bianji",
                    title: "编辑",
                    handler: function (node, $div) {
                        edit(node.nodeId);
                    }
                },
                {
                    toolbarId: "remove",
                    icon: "dtree-icon-roundclose",
                    title: "删除",
                    handler: function (node, $div) {
                        del(node.nodeId);
                    }
                }
            ],
            response: {
                statusCode: 200,
                message: "message",
                treeId: "id",
                parentId: "parentId",
                title: "deptName"
            },
            toolbarFun:{
                loadToolbarBefore: function(buttons, param, $div){
                    if(param.level === "1"){ // 如果是顶级节点, 则取消编辑和删除功能.
                        buttons.edit = "";
                        buttons.remove = "";
                    }

                    return buttons;
                }
            }
        });

        table.render({
            elem: '#dept-table'
            , url: 'findList'
            , where: {
                parentId: 0
            }
            , cellMinWidth: 80
            , toolbar: '#toolbar'
            , cols: [
                [
                    {type: 'numbers', title: '序号', width: "5%"}
                    , {field: 'id', title: 'ID', hide: true}
                    , {field: 'deptName', title: '名称'}
                    , { title: '排序', fixed: 'right', align: 'center', toolbar: '#column-toolbar-sort'}
                    , {title: '操作', align: 'center', toolbar: '#column-toolbar'}
                ]
            ]
        });

        dtree.on("node('deptTree')", function (obj) {

            table.reload('dept-table', {
                where: {
                    parentId: obj.param.nodeId
                },
            });
            parentDeptId = obj.param.nodeId;
            $("#card-header").html("[" + obj.param.context + "]的子部门");
        });

        table.on('toolbar', function (obj) {
            var event = obj.event;
            if (event === 'add') {
                add(parentDeptId);
            }
        });

        table.on('tool', function (obj) {
            var data = obj.data;
            var swapId;
            var currentId;
            if (obj.event === 'edit') {
                var url = "editUI?id="+data.id;
                common.cmsLayOpen('修改', url,'600px', '500px');

            } else if (obj.event === 'del') {
                del(data.id);
            } else if (obj.event === "up") {
                swapId = $(obj.tr).prev().find("td[data-field='id'] div").html();
                currentId = data.id;
                if (typeof swapId == 'undefined') {
                    layer.msg("已是第一层");
                    return;
                }
                swapSort(currentId, swapId);
            } else if (obj.event === "down") {
                swapId = $(obj.tr).next().find("td[data-field='id'] div").html();
                currentId = data.id;
                if (typeof swapId == 'undefined') {
                    layer.msg("已是最后一层");
                    return;
                }
                swapSort(currentId, swapId);
            } else if (obj.event === "top") {
                swapId = $("tr[data-index='0']").first().parent().children().first().find("td[data-field='id'] div").html();
                currentId = data.id;
                swapSort(currentId, swapId);
            } else if (obj.event === "bottom") {
                swapId = $("tr[data-index='0']").first().parent().children().last().find("td[data-field='id'] div").html();
                currentId = data.id;
                swapSort(currentId, swapId);
            }
        });


        function add(parentDeptId) {
            var url = "addUI?parentId="+parentDeptId;
            common.cmsLayOpen('添加', url,'600px', '500px');
        }

        function swapSort(currentId, swapId) {
            $.post('swap', {currentId: currentId, swapId: swapId}, function (data) {
                layer.msg("交换成功");
                    refresh();
            });
        }

        function del(id) {
            layer.confirm("你确定要删除么？如果存在下级节点则一并删除！",{btn:['是的,我确定','我再想想']},
                function(){
                    $.post("delete",{"id":id},function (res){
                        if(res.success){
                            layer.msg("删除成功",{time: 1000},function(){
                                refresh();
                            });
                        }else{
                            layer.msg(res.message);
                        }

                    });
                }
            )
        }

        function refresh() {
            table.reload("dept-table");
            DTree.menubarMethod().refreshTree();
        }


        function edit(id) {
            var url = "editUI?id="+id;
            common.cmsLayOpen('修改', url,'600px', '500px');
        }
    });
</script>
</body>

</html>